 <!-- html5 文档的标识 -->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>1</title>
</head>
<body>
    hello
    <!-- 1.标题标签 h1  -  h6 -->
     <h1>标题1</h1>
     <style>
         h1{
             color: red;
         }
     </style>
     <h2>标题2</h2>
     <style>
         h2{
             color: blue;
             font-size: 20px;
             text-align: center;
             background-color: yellow;
             border: 1px solid red;
             padding: 10px;
             margin: 10px;
             border-radius: 10px;
             box-shadow: 5px 5px 5px gray;
             text-shadow: 5px 5px 5px gray;
             line-height: 2;
             font-family: 'Courier New', Courier, monospace;
             text-decoration: underline;
             text-transform: uppercase;
             letter-spacing: 5px;
             word-spacing: 5px;
             white-space: nowrap;
             overflow: hidden;
             text-overflow: ellipsis;
             text-align: justify;
             text-indent: 20px;
         }
     </style>
     <!-- 2 . 段落标签 p -->
     <p>
         这是段落
         ConcurrentHahsMap 技术在互联网技术使用后wnag 的实现中，
         引入了 ConcurrentHashMap.KeySetView 类，
         继承了 AbstractSet 类，
         实现了 Set 接口，
         并且重写了 AbstractSet 类中的方法。
     </p>
     <!-- 3，图片标签 img 
        src 属性：图片的源路径
        相对路径：相对当前的路径
        绝对路径：从根目录开始
        alt 属性：图片的替代文本
     -->
      <img src="img/OIP-C.jpg">
<!-- 4.超链接标签 a
     href 属性：超链接的源路径
     target 属性：打开超链接的方式
     _self：当前窗口打开
     _blank：新窗口打开
     _parent：父窗口打开
     _top：最顶层窗口打开
     rel 属性：超链接的属性
          -->
     <a href="https://www.baidu.com" target="_blank" >百度</a>
     <a href="a.html">访问a</a>
     <a href="test/b.html">访问b</a>
     <!-- 无序列表标签 ul 
        列表项标签 li
        有序列表标签 ol
        列表项标签 li
        描述列表标签 dl
        描述列表项标签 dt
        描述列表项标签 dd
-->

      <ul>
        <!-- 横着排布列 -->
         <li>京东</li>
         <li>淘宝</li>
         <li>拼多多</li>
         <li>京东</li>

     </ul>
     <!-- 文本的标签 
        span ：行内标签
        div ：块级标签
        换行标签 br-->
      <span>￥200
      </span>
      <b>加粗标签</b>
      <i>斜体标签</i>
      <strong>strong 加粗比重较大</strong>
      <em>em 斜体比重较大</em>
      <del>del 删除线</del>
      <ins>ins 插入线</ins>
      <label>输入框前面的提示语</label>
      <!-- 表单 form 注册 登录 搜索引擎，新增收件地址，修改收件地址
        表单标签 form
        单选框 radio
        多选框 checkbox
 -->
       <form action="">
            <label for="姓名"></label> <input type="text"></input> <br>
            <label for="手机号"></label> <input type="text"><br>
            <label for="密码"></label> <input type="password"><br>
            <label for="性别"></label> <input type="radio" name="gender" value="M">男 
                                       <input type="radio" name="gender" value="F">女<br></input></input>
            <label for="学历"></label> <input type="radio" name="study" value="b">本科</input >
                                        <input type="radio" name="study" value="s">硕士</input>
                                        <input type="radio" name="study" value="z">博士</input>
                                        <input type="radio" name="study" value="q">专科</input><br>
            <label for="美食"></label> <input type="checkbox" name="food" value="1" checked>牛排</input>
                                       <input type="checkbox" name="food" value="2">麻辣烫</input>
                                       <input type="checkbox" name="food" value="3">烤肉</input>
                                       <input type="checkbox" name="food" value="4">火锅</input>
            <label for="专业"></label> <select name="major">
                <option value="1">软件工程</option>
                <option value="2">计算机科学与技术</option>
                <option value="3">网络工程</option>
                <option value="4">物联网</option>
            </select>
            <label for="邮箱"></label> <input type="email"></input> <br>
            <label for="日期"></label> <input type="date"></input>
            <label for="文件上传"></label> <input type="file"></input>
            <label for="数量"></label> <input type="number" value="1"></input>
            <label for="搜索"></label> <input type="search"></input>
            <label for="自我介绍"></label> <textarea name="introduction" id="" cols="30" rows="10"></textarea>
            <input type="button" value="按钮"> </input>
            <input type="reset" value="重置"></input>
            <input type="submit" value="提交"></input>
            <button>按钮</button>
        </form>
</body>
</html>